<script setup lang="ts">
import { CashOutline as CashIcon } from '@vicons/ionicons5'
import { useRouter } from "vue-router"
import { useUserStore } from '@/store/modules/user'
import { ref } from 'vue'
import MyRequest from '@/service/service'
import {
  FormInst,
  FormItemInst,
  FormItemRule,
  useMessage,
  FormRules
} from 'naive-ui'
const user = useUserStore()

interface ModelType {
  user: string | null
  password: string | null
}

const router = useRouter()
console.log('router,',router)
function redirect () {
  interface Req {
    username: string
    password: string
  }
  MyRequest<Req>({
    name: 'login',
    body:{
      username:'admin',
      password:'qwer1234',
    },
    interceptors: {
      requestInterceptors(res) {
        console.log('接口请求拦截',res)
        return res
      },
      responseInterceptors(result) {
        console.log('接口响应拦截',result)
        return result
      },
    },
  })
  .then((res:any)=>{
    console.log(res)
    if(res.status==0){
      user.setUserInfo(res.data)
      localStorage.setItem('token',res.token)
      router.push('/index')
    }
  })
  // .catch((err)=>{
  //   console.log(err)
  // })
} 


const formRef = ref<FormInst | null>(null)
const rPasswordFormItemRef = ref<FormItemInst | null>(null)
const message = useMessage()
const model = ref<ModelType>({
  user: 'admin',
  password: 'qwer1234',
})
function validatePasswordStartWith (
  rule: FormItemRule,
  value: string
): boolean {
  return (
    !!model.value.password &&
    model.value.password.startsWith(value) &&
    model.value.password.length >= value.length
  )
}
function validatePasswordSame (rule: FormItemRule, value: string): boolean {
  return value === model.value.password
}
function handlePasswordInput () {
    rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
}

</script>
<template>
  <div class="app">

  <div class="login-box flex">
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <n-gradient-text
      :gradient="{
        from: '#bd5c50',
        to: '#4d6985'
      }"
    >
    欢迎访问
    </n-gradient-text>
    <n-form ref="formRef" :model="model" >
    <n-form-item path="user" label="用户">
      <n-input v-model:value="model.user" @keydown.enter.prevent />
    </n-form-item>
    <n-form-item path="password" label="密码">
      <n-input
        v-model:value="model.password"
        type="password"
        @input="handlePasswordInput"
        @keydown.enter.prevent
      />
    </n-form-item>
  </n-form>
    <n-button color="#8a2be2" @click="redirect">
      <template #icon>
        <n-icon>
          <cash-icon />
        </n-icon>
      </template>
      进入
    </n-button>
  </div>
</div>

</template>

<style lang="scss" scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
.login-box{
  width: 400px;
  @include flex-center;
  margin: 0 auto;
  flex-direction: column;
  margin-top: 150px;
  border-radius: 4px;
  justify-content: space-around;
  padding: 24px;
}
.app{
  background-image: url('@/assets/images/wall.jpeg');
  height: 100vh;
  width: 100vw;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>
